<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学习vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script><!--导入官网的vue,就不用去用本地的了-->
    <script src="https://static.runoob.com/code/js/vueapp.js"></script><!--用于model-->
    <script src="/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .active{
            border: solid red;
        }
        .qie{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <span>{{user.name}}</span> <!--也是点出来-->
    <span>{{user.age}}</span> <!--也是点出来-->
    <!--v-text指令-->
    <ul >
        <li>第一个{{campus[0]}}</li><!--campus[0]第一个，campus[1]第二个-->
        <li>第二个{{campus[1]}}</li><!--campus[0]第一个，campus[1]第二个-->
        <li>第三个{{campus[2]}}</li><!--campus[0]第一个，campus[1]第二个-->
    </ul>
    <span v-text="msg +'！'"></span><!--v-text只解析为文本字符串拼接用单引号-->
    <br>
    <span v-html="txt"></span>
    <br>
    <span v-html="ht"></span>
    <input type="button"  v-on:click="cli" value="点击"><!--@等同于v-on-->
    <input type="button"  v-on:click="hi(666)" value="hi"><!--@等同于v-on方法加参数-->
    <input type="text"  @keyup.enter="good" value="问候"><!--keyup.enter按回车键-->
    <input type="button"  @click.left="left" value="点左键"><!--keyup.enter按回车键-->
    <input type="button"  @click.right="right" value="点右键"><!--@click.rightr按右键-->
    <input type="button"  @click.middle="middle" value="点中间键"><!--@click.middle中间键-->
    <input type="button"  @click="cli0" value="@点击"><!--@等同于v-on-->
    <h1 @click="food">{{foods}}</h1>
    <input type="button"  v-on:dblclick="dblcli" value="双击"><!--dblclick双击-->
    <input type="button"  v-on:mouseenter="mouseenter" value="移动这上面"><!--mouseenter移动这上面-->
    <div class="btn-group">
        <button  v-on:click="sub">-</button>
        <span v-text="num"></span>
        <button v-on:click="add">+</button>
    </div>
    <br>

    图片的显示
    <img src="./images/2.gif" v-show="isshow">
    <button @click="changshow">切换显示</button>
    <h1 v-show="showout">出来了</h1>
    <br>
    <!--v-if是对dom元素的操作，v-show是对属性的操作-->
    <h2 v-if="hot>37">当前温度是{{hot}}v-if发烧了</h2>
    <h2 v-if="hot<37">当前温度是{{hot}}v-if没有发烧</h2><!--如果用点击事件，就写方法，判断hot的值-->
    学习v-bind绑定属性
    <!--可以用三元表达式，也可以用{active:isactive}-->
    <img v-bind:src="sr" v-bind:title="title" v-bind:class="isactive?'active':''" ><!--v-bind:class和:class等同-->
    <img :src="sr"  :class="{active:isactive}" :title="title+'！！！'"  @click="clickimg">
    <br>
    音乐
    <audio src="/music/1.mp3" controls autoplay  class=""></audio>
    <br>
    视频
    <video src="video/1.mp4" autoplay controls loop width="800px" poster="images/1.jpg" height="800px" class=""></video>
    v-for列表
    <ul>
        <!--和for(i in arr)相识-->
        <li v-for=" (item,index) in arrs">
            {{index+1}}: {{item}}

        </li>
        <li v-for=" (item,index) in vegetables">
            {{index+1}}: {{item.name}}

        </li>
    </ul>
    <!--添加数据-->
    <button @click="addvegetables">添加蔬菜的类型</button>
    <button @click="removevegetables">删除蔬菜的类型</button>
    <div v-on:scroll.passive="onScroll">滚动显示</div><!-- scroll.passive 滚动事件 -->
    <br>
    使字符反转
    <span > {{string}}</span>
    <!-- string.split('').reverse().join('')让字符反转 -->
    <span > {{string.split('').reverse().join('')}}</span>
    <!-- 用computed里面写方法反转 -->
    <span > {{revstring}}</span>
</div>
<!--显示图片切换-->
<div id="changeimg">
    <a id="qie">
        <a v-if="index!=0" @click="prev"><----左箭头</a>
        <!--用数组的形式，显示图片，index，在vue里面改变-->
        <img :src="imgs[index]" style="width: 100px;height: 100px">

        <a  v-show="index<imgs.length-1" @click="next"><----右箭头</a>
    </a>

</div>


<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            user:{
                name:"柳谦",
                age: "10岁"

            },
            /*数组*/
            campus:["1","2","3","4"],
            msg: "v-text的指令测试",
            txt: "v-html解析文文本",
            ht: "<a href='www.baidu.com'>v-html解析标签百度</a>",
            foods: "饭",
            num: 0,
            isshow:true,
            showout: false,
            hot: 35,
            sr: "/images/1.jpg",/*图片的地址*/
            isactive:true, /*先不显示*/
            title:"图片标题",
            arrs:["江西","北京","上海","其他"],
            vegetables:[{name:"花菜"}, {name:"西红柿"}, {name:"土豆"}],
            string: "字符反转"
        },
        /*这里写方法，方法名：function(){}*/
        methods:{
            cli:function () {
                alert("点击了");
            },
            cli0:function () {
                alert("@点击了");
            },
            food:function () {
                this.foods="不好吃吗";
                /*用this可以得到data中的数据*/
            },
            dblcli:function () {
                alert("双击了");
            },
            left:function(){
                alert("点击了左键");
            },
            right:function(){
                alert("点击了右键");
            },
            middle:function(){
                alert("点击了中间键");
            },
            mouseenter:function () {
                alert("移到这了");
            },
            /*减法*/
            sub:function () {
                if(this.num>0){
                    this.num--;
                    this.isshow=true;/*显示*/
                }else if(this.num<=0){
                    this.num=0;
                    this.isshow=false;/*显示*/
                }

            },
            add:function () {
                if(this.num>=10){
                    alert("没有库存了")
                    this.isshow=false;/*不显示*/
                }else if(this.num<10){
                    this.num++;
                    this.isshow=true;/*显示*/
                }

            },
            changshow:function () {
                this.showout=! this.showout/*切换显示*/
            },
            clickimg:function () {
                this.isactive=!this.isactive/*切换显示*/
            },
            addvegetables:function () {
                this.vegetables.push({name:"鸡蛋"})/*给数组添加*/

            },
            removevegetables:function () {
                /*           this.vegetables.shift()/!*shift()从左边删除c*!/*/
                this.vegetables.pop()/*pop()从后面加的删除*/
            },
            hi:function (i) {
                alert('输入'+i);

            },
            good:function () {
                alert("你好，老铁")
            }



        },
        watch:{
            onScroll:function(){
                alert("滚动了")
            }
        },
        computed: {
            // 计算属性的 getter
            revstring: function () {
                // `this` 指向 vm 实例
                return this.string.split('').reverse().join('')
            }
        }
    })
    var imgchange=new Vue({
        el:"#changeimg",
        data:{
            index: 0,
            imgs:["./images/1.jpg","./images/2.gif","./images/3.gif","./images/4.gif"],


        },
        methods:{
            prev:function () {
                this.index--

            },
            next:function () {
                this.index++
            }
        }
    });

</script>
</body>
</html>